<template>
  <view class="ms_card">
    <view class="swiperPanel" @touchstart.stop="startMove" @touchend.stop="endMove">
      <view class="swiperItem" v-for="(item, index) in swiperList" :key="index"
        :style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
        <view class="children">
          <view class="card">
            <slot name="itemslot" :item="item"></slot>
          </view>
        </view>
      </view>
    </view>
    </view>
</template>

<script>
  export default {
    props: {
      swiperList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        slideNote: {
          x: 0,
          y: 0
        },
        screenWidth: 0,
        itemStyle: []
      };
    },
    created() {
     
      var macInfo = uni.getSystemInfoSync();
      this.screenWidth = macInfo.screenWidth;
      // 计算swiper样式
      this.swiperList.forEach((item, index) => {
        this.itemStyle.push(this.getStyle(index))
      })
    },
    methods: {
      getStyle(e) {
         
        if (e > this.swiperList.length / 2) {
          var right = this.swiperList.length - e
          return {
            transform: 'scale(' + (1 - right / 8) + ') translate(-' + (right * 9) + '%,0px)',
            zIndex: 99 - right,
            opacity: 0.8 / right
          }
        } else {
          return {
            transform: 'scale(' + (1 - e / 8) + ') translate(' + (e * 9) + '%,0px)',
            zIndex: 99 - e,
            opacity: 0.8 / e
          }
        }
      },
      startMove(e) {
        this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
        this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
      },
      endMove(e) {
        var newList = JSON.parse(JSON.stringify(this.itemStyle))
        if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
          // 向左滑动
          var last = [newList.pop()]
          newList = last.concat(newList)
        } else {
          // 向右滑动
          newList.push(newList[0])
          newList.splice(0, 1)
        }
        this.itemStyle = newList
      }
    }
  }
</script>

<style lang="scss">
  .swiperPanel {
    position: absolute;
    z-index: 99;
    // left: 0;
    // right: 0;
    // margin: 0 auto;
    top: calc(100% - 310rpx);
    height: 300rpx;
    width: 100%;
    overflow: hidden;
    // position: relative;

    .swiperItem {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: all .5s;

      .children {
        height: 220rpx;
        width: 620rpx;
        margin: 2rpx auto;
        padding: 35rpx;
        background-color: white;
        border-radius: 12rpx;

        box-shadow: 2rpx 2rpx 10rpx #cfcfcf;


      }
    }
  }

  .ms_card {}
</style>